<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五个丝滑的按钮！</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #app {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
      }

      #btn1,
      #btn2,
      #btn3,
      #btn4,
      #btn5 {
        display: block;
        margin: 30px;
        font-size: 20px;
      }

      #btn1 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, background-color 0.2s, font-size 0.2s,
          border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn1:hover {
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
        font-size: 23px;
      }
      #btn1:hover:active {
        font-size: 19px;
        border: solid 7px #000;
        background-color: #bbb;
      }

      #btn2 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, border 0.2s, background-color 0.2s,
          font-size 0.2s, border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn2:hover {
        background-color: #aaa;
        border: solid 3px #000;
        color: #000;
        font-size: 23px;
      }

      #btn2:hover:active {
        font-size: 25px;
        border: solid 7px #000;
        background-color: #ddd;
      }


      #btn3 {
        width: 120px;
        height: 60px;
        transition: color 0.2s, border 0.2s, background-color 0.2s,
          font-size 0.2s, border 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }

      #btn3:hover {
        background-color: #bbb;
        border: solid 7px #000;
        color: #000;
        font-size: 22px;
      }

      #btn3:hover:active {
        font-size: 25px;
        border: solid 5px #000;
        background-color: #ddd;
      }

      
      #btn4 {
        width: 120px;
        height: 60px;
        filter: blur(0);
        transition: width 0.2s, height 0.2s, color 0.2s, border 0.2s,
          background-color 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn4:hover {
        width: 130px;
        height: 70px;
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
      }
      #btn4:hover:active {
        width: 110px;
        height: 50px;
        border: solid 3px #000;
        background-color: #bbb;
      }

      #btn5 {
        width: 120px;
        height: 60px;
        filter: blur(0);
        transition: width 0.2s, height 0.2s, color 0.2s, border 0.2s,
          background-color 0.2s;
        border: 0;
        border-radius: 999px;
        background-color: #000;
        color: #fff;
      }
      #btn5:hover {
        width: 110px;
        height: 50px;
        background-color: #fff;
        border: solid 3px #000;
        color: #000;
      }
      #btn5:hover:active {
        width: 130px;
        height: 70px;
        border: solid 3px #000;
        background-color: #bbb;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>五个丝滑的按钮</h1>
      <h3>By Ckblt</h3>
      <button id="btn1">button1</button>
      <button id="btn2">button2</button>
      <button id="btn3">button3</button>
      <button id="btn4">button4</button>
      <button id="btn5">button5</button>
      <p>注：由于 button4 和 button5 会变大小，不建议使用</p>
    </div>
  </body>
</html>
